<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 
    项目中使用过渡动画目的：提升用户体验 
    在vue中，transition，可以实现元素的显示与隐藏或组件的显示与隐藏。

    用法：
      分两个过程：enter进入动画   leave离开动画

    进入动画：.ml-enter / .ml-enter-active / .ml-enter-to  （动画名就叫做'ml'）
    离开动画：.ml-leave / .ml-leave-active / .ml-leave-to  （动画名就叫做'ml'）

    也可以使用第三方的动画库：animate.css  

    如何给多个元素添加动画：
      需要给每一个元素都添加key，必须唯一的，否则动画不生效 
      mode 指定多个元素显示或隐藏的先后顺序。如mode="out-in",表示离开动画先执行，进入动画后执行。  

      transition-group 作用：一般是给列表添加分组动画。看一下vue官网。给了一个dome。在开发中很少自己写列表动画。


    常见的面试题：
      1）vue中的动画怎么做？
      2）trisition对多个元素执行动画要注意什么？ 加key，使用mode 
      3）尝试去网上找一个vue动画的案例

    除了上面使用css类名使用动画之外，还可以使用js钩子函数实现动画。自学吧。
   -->
  <style>
    .ml-enter {
      opacity: 0;
      color: red;
      font-size: 12px;
    }

    .ml-enter-active {
      transition: all ease 2s;
    }

    .ml-enter-to {
      opacity: 1;
      color: blue;
      font-size: 22px;
    }

    .ml-leave {
      opacity: 1;
      color: blue;
      font-size: 22px;
    }

    .ml-leave-active {
      transition: all ease 2s;
    }

    .ml-leave-to {
      opacity: 0;
      color: red;
      font-size: 12px;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <button @click="isShow = !isShow">显示或隐藏</button>

    <!-- 对单一的元素使用动画 -->
    <!-- <transition name="ml">
      <h2 v-if="isShow">{{name}}</h2>
    </transition> -->

    <!-- 在vue2中，多个节点，需要加key,vue3中是不需要加的 -->
    <!-- <transition name="ml">
      <h2 key="a" v-if="isShow">{{name}}</h2>
      <h2 key="b" v-else>我是另一个h2</h2>
    </transition> -->

    <transition enter-active-class="animate__animated animate__fadeInUpBig"
      leave-active-class="animate__animated animate__backOutDown" mode="out-in">
      <h2 key="a" v-if="isShow">{{name}}</h2>
      <h2 key="b" v-else>我是另一个h2</h2>
    </transition>

  </div>

  <script>
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          isShow: false
        }
      }
    });
  </script>
</body>

</html>